<template>
	<view class="content page">
		<swiper autoplay circular indicator-dots indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in images" :key="i">
				<image :src="item" alt="" class="banner-img" />
			</swiper-item>
		</swiper>
		<view class="recommend">
			<fui-grid :columns="4" :show-border="false">
				<fui-grid-item v-for="(item, i) in recommends" :key="i">
					<tar-icon-item style="height: 100%;" :value="item"></tar-icon-item>
				</fui-grid-item>
			</fui-grid>
		</view>

		<uni-notice-bar show-icon text="新年新气象, 龙年行大运!" background-color="#fff" />
		<tar-water-flow :wf-list="products"/>
	</view>
</template>

<script>
	import {
		fetctProducts
	} from '../../service/api/mall'
	export default {
		data() {
			return {
				products: [],
				recommends: [{
						title: '商品分类',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/e5db7f073769bd7733cea35b8c3fb529.png'
					},
					{
						title: '我的收藏',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/9f84a4c0aa2e6d75ddbbde44644dd0e5.png'
					},
					{
						title: '我的等级',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/fba50f0bac1bda1aafc5f57680176167.png'
					},
					{
						title: '专题活动',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/7b055e3f2842a2f23f309511d0a9e07f.png'
					},
					{
						title: '抽奖活动',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/1aaf0178d58d59bb9958563f5493d5f3.png'
					},
					{
						title: '拼团',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/b611895dc57ef9a6c794a54d36e2bf72.png'
					},
					{
						title: '地址管理',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/0a6fd59cbb56dc353c94b24f9550322c.png'
					},
					{
						title: '积分商城',
						img: 'https://pro.crmeb.net/uploads/attach/2024/03/20240306/a2e65ccab60611e1f1c3d835f717a9bc.png'
					},
				],
				images: [
					'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png',
					'https://mall.wzxfyl.com/images/cate_1.png',
					'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png',
					'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png',
					'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png',
					'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png',
				]
			}
		},
		onLoad() {
			this.fetchData()

		},
		methods: {
			fetchData() {
				fetctProducts().then(res => {
					this.products = res
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: .5em;
		background: #F8F8F8;
		min-height: 100vh;
		overflow: auto;

	}

	swiper {
		height: 380rpx;
		border-radius: .5em;
		overflow: hidden;
	}

	.banner-img {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	.recommend {
		background: #fff;
		margin: .5rem 0;
		border-radius: .5rem;
	}

	.item-image {
		width: 100%;
	}
</style>